Ta ditt gränssnitt till nästa nivå: Bemästra CSS Custom Highlight API för att styla textmarkeringar

I det här exemplet har vi definierat ett anpassat markeringsnamn som heter code-highlight. Vi har sedan applicerat denna markering på code-element. Bakgrundsfärgen är satt till ljusblå (#ADD8E6), textfärgen är satt till mörkblå (#00008B), och teckensnittsvikten är satt till fet. Nu, när text markeras inuti ett code-element, kommer den att stylas med dessa anpassade stilar.

Avancerad användning: Rikta in sig på specifika textintervall

CSS Custom Highlight API kan också användas för att rikta in sig på specifika textintervall inom ett element. Detta möjliggör ännu mer detaljerad kontroll över stylingen av textmarkeringar.

Exempel: Markera söktermer

Föreställ dig att du vill markera söktermer i ett dokument. Detta kräver ofta JavaScript i kombination med CSS Highlight API.

1. Använd JavaScript för att identifiera söktermer: Använd JavaScript för att hitta alla förekomster av söktermen i dokumentet.
2. Skapa markeringsintervall: Använd Range-API:et i JavaScript för att skapa intervall för varje förekomst av söktermen.
3. Applicera markeringen: Använd metoden CSS.highlights.set() för att applicera markeringen på de skapade intervallen.

            
// JavaScript-kod för att markera söktermer
function highlightSearchTerms(searchTerm) {
  // Definiera först den anpassade markeringen i CSS
  const highlightName = 'search-highlight';
  const ranges = [];

  // Hitta alla textnoder
  function findTextNodes(el) {
      let n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
      while(n=walk.nextNode()) a.push(n);
      return a;
  }

  const textNodes = findTextNodes(document.body);

  textNodes.forEach(node => {
    let nodeValue = node.nodeValue;
    let index = nodeValue.indexOf(searchTerm);

    while (index !== -1) {
      const range = document.createRange();
      range.setStart(node, index);
      range.setEnd(node, index + searchTerm.length);
      ranges.push(range);
      index = nodeValue.indexOf(searchTerm, index + searchTerm.length);
    }
  });

  // Applicera markeringarna med CSS.highlights.set()
  if (CSS.highlights && CSS.highlights.set) {
    CSS.highlights.set(highlightName, ranges);
  } else {
    console.warn('CSS Custom Highlight API stöds inte fullt ut i denna webbläsare. Tillhandahåller fallback');
    // Tillhandahåll en fallback för webbläsare med begränsat stöd (t.ex. äldre Safari)
    ranges.forEach(range => {
      const span = document.createElement('span');
      span.style.backgroundColor = '#FFA07A'; // Ljus lax
      span.style.color = '#000000'; // Svart
      span.className = 'search-highlight-fallback'; // Lägg till en klass för fallback-styling
      range.surroundContents(span);
    });
  }
}

// CSS-kod för att styla sökmarkeringen
::highlight(search-highlight) {
  background-color: #FFA07A; /* Ljus lax */
  color: #000000; /* Svart */
}

/* Fallback-styling för webbläsare som inte fullt ut stöder API:et */
.search-highlight-fallback {
 background-color: #FFA07A;
 color: #000000;
}

// Exempelanvändning: markera termen "exempel"
highlightSearchTerms("exempel");

            

              
                Copy
              
            
          

Detta kodavsnitt visar hur man markerar söktermer i ett dokument med hjälp av JavaScript och CSS Custom Highlight API. JavaScript-koden identifierar söktermerna, skapar intervall för varje förekomst och applicerar search-highlight på dessa intervall. CSS-koden stylar sedan den markerade texten med en ljus laxfärgad bakgrund och svart text.

Viktig anmärkning: Denna metod kräver JavaScript och förlitar sig på CSS.highlights-API:et. Eftersom stödet inte är universellt visas en fallback-mekanism (som att omge texten med en `span` och styla den `span`-taggen).

Tillgänglighetsaspekter

När du använder CSS Custom Highlight API är det avgörande att ta hänsyn till tillgänglighet för att säkerställa att din webbplats är användbar för alla, inklusive användare med funktionsnedsättningar.

Tips för tillgänglig styling av textmarkeringar:

• Säkerställ tillräcklig kontrast: Upprätthåll tillräcklig kontrast mellan bakgrunds- och textfärgen på den markerade texten för att göra den läsbar för användare med synnedsättningar. WCAG-riktlinjerna rekommenderar ett kontrastförhållande på minst 4.5:1 för normal text.
• Förlita dig inte enbart på färg: Förlita dig inte enbart på färg för att indikera textmarkering. Använd ytterligare visuella ledtrådar, som understrykning eller fetstil, för att göra markeringen tydligare.
• Tillhandahåll alternativ styling för högkontrastläge: Användare som aktiverar högkontrastläge i sitt operativsystem kan åsidosätta dina anpassade stilar. Tillhandahåll alternativ styling som fungerar bra i högkontrastläge för att säkerställa läsbarheten. Du kan använda mediafrågor som @media (forced-colors: active) för att upptäcka när högkontrastläge är aktiverat.
• Testa med hjälpmedelsteknik: Testa din webbplats med hjälpmedelsteknik, som skärmläsare, för att säkerställa att den markerade texten meddelas och förstås korrekt.

Exempel: Säkerställa tillräcklig kontrast

            
::highlight {
  background-color: #000080; /* Marinblå */
  color: #FFFFFF; /* Vit */
}

            

              
                Copy
              
            
          

I det här exemplet har vi valt en marinblå bakgrundsfärg och vit textfärg, vilket ger tillräcklig kontrast för användare med synnedsättningar. Använd alltid en färgkontrastkontroll för att verifiera att dina färgval uppfyller tillgänglighetsstandarder. Verktyg som WebAIM's Contrast Checker kan vara till hjälp.

Praktiska exempel och användningsfall

CSS Custom Highlight API erbjuder ett brett spektrum av möjligheter för att förbättra användarupplevelsen. Här är några praktiska exempel och användningsfall:

• Kodmarkering: Som visats tidigare kan du använda API:et för att markera kodavsnitt med anpassade stilar, vilket gör dem mer visuellt tilltalande och lättare att läsa.
• Markering av söktermer: Markera söktermer i ett dokument för att hjälpa användare att snabbt hitta den information de letar efter.
• Felmarkering: Markera fel eller varningar i formulär eller andra användargränssnitt för att dra användarens uppmärksamhet till dem.
• Citatmarkering: Markera citerad text i akademiska uppsatser eller artiklar för att visuellt skilja den från huvudinnehållet.
• Konversationsmarkering: I chattapplikationer, markera användarens egna meddelanden eller meddelanden från specifika användare för att göra dem lättare att följa.
• Spelifiering: Markera specifika ord eller fraser i ett spel för att ge ledtrådar eller tips till spelaren.
• Textsammanfattning: Markera nyckelmeningar eller fraser i ett dokument för att ge en snabb sammanfattning av innehållet. Detta involverar ofta komplexa algoritmer för att bestämma betydelse.

Bästa praxis och tips

För att få ut det mesta av CSS Custom Highlight API, följ dessa bästa praxis och tips:

• Använd beskrivande markeringsnamn: Välj beskrivande markeringsnamn som tydligt indikerar syftet med markeringen. Detta kommer att göra din kod mer läsbar och underhållbar. Använd till exempel code-highlight istället för highlight-1.
• Håll stilen konsekvent: Upprätthåll en konsekvent stil över alla dina markeringar för att skapa en sammanhängande användarupplevelse. Använd ett designsystem eller en stilguide för att säkerställa konsistens.
• Undvik överanvändning av markeringar: Överanvänd inte markeringar, eftersom detta kan vara distraherande och överväldigande för användare. Använd dem sparsamt och strategiskt för att uppmärksamma den viktigaste informationen.
• Testa på olika enheter och webbläsare: Testa din webbplats på olika enheter och webbläsare för att säkerställa att dina anpassade markeringar visas korrekt. Var särskilt uppmärksam på mobila enheter och äldre webbläsare.
• Tänk på prestanda: Även om CSS Custom Highlight API generellt sett har god prestanda, var medveten om antalet markeringar du använder, särskilt på stora dokument. För många markeringar kan påverka prestandan. Om du använder JavaScript för att hantera markeringar, optimera din kod för att minimera antalet DOM-manipulationer.
• Använd progressiv förbättring: Eftersom webbläsarstödet inte är universellt, använd tekniker för progressiv förbättring. Implementera en fallback-mekanism med standard CSS-styling för att säkerställa att upplevelsen förblir användbar för dem med äldre webbläsare. Överväg att använda funktionsdetektering (t.ex. kontrollera förekomsten av `CSS.highlights`) för att avgöra om du ska använda API:et eller fallback-lösningen.

Slutsats

CSS Custom Highlight API är ett kraftfullt verktyg för att förbättra användarupplevelsen och skapa mer visuellt tilltalande och informativa textmarkeringar. Genom att bemästra detta API kan du ta din UI-design till nästa nivå och ge användarna en mer engagerande och tillgänglig webbupplevelse. Medan webbläsarstödet fortfarande utvecklas, kommer förståelse och experimenterande med detta API nu att positionera dig för att skapa banbrytande webbupplevelser när antagandet växer. Kom ihåg att prioritera tillgänglighet och tillhandahålla fallbacks för äldre webbläsare för att säkerställa en positiv upplevelse för alla användare.

Resurser

• MDN Web Docs: CSS Custom Highlight API
• Can I Use: CSS Custom Highlight API
• WebAIM Contrast Checker